<template>
	<div>
		<div class="menuList" v-for="item in menuListData" :key="item.id">
			<div class="menuTitle" @click="clickMenuTitle(item.id)">
				<img class="menuTitleImg" :src="item.icon" alt="">
				{{item.title}}
				<i slot="suffix" class="el-icon el-icon-arrow-right" :class="item.isShow?'isMenuShow':''"></i>
				<!-- <i slot="suffix" class="el-icon el-icon-arrow-right"></i> -->
			</div>
			<ul class="menuUl" v-show="item.isShow">
				<li class="menuLi" :class="isSelectId==list.id?'isSelectLi':''" v-for="list in item.children" :key="list.id" @click="clickLiTitle(list.id,list.url)">
					<img class="menuTitleImg" :src="list.icon" alt="">
					{{list.title}}
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default {
		data(){
			return{
				menuListData:[
					{
						title: '我的联系人',
						id: 1,
						isShow: true,
						icon: require('@/assets/image/icon/wdlxr.png'),
						children:[
							{
								title: '我的联系人',
								url: '/linkmenber/linkman/mylinkman',
								icon: require('@/assets/image/icon/wdlxr.png'),
								id: 11
							},
							// {
							// 	title: '好友申请',
							// 	url: '/linkmenber/linkman/friendrequest',
							// 	icon: require('@/assets/image/icon/hysq.png'),
							// 	id: 12
							// },
							// {
							// 	title: '我的申请',
							// 	url: '/linkmenber/linkman/myrequest',
							// 	icon: require('@/assets/image/icon/wdsq.png'),
							// 	id: 13
							// },
							// {
							// 	title: '团队邀请',
							// 	url: '/linkmenber/linkman/teamrequest',
							// 	icon: require('@/assets/image/icon/tdyq.png'),
							// 	id: 14
							// }
						]
					}
				],
				isSelectId: 11
			}
		},
		created() {
			this.$store.commit('set_navIndex', 1)
			this.$store.commit('set_lowerIsShow', true)
			this.$store.commit('set_lowerIndex', 2)
			this.$store.commit('set_linkIndex', 11)
		},
		mounted() {
			this.isSelectId = this.$store.state.addressList.linkIndex
			// console.log(this.$store.state)
		},
		computed: {
			monitor () {
				return this.$store.state.company.companyId
			}
		},
		watch:{
			monitor (newData) {
				this.$router.push(`/linkmenber/linkman/mylinkman?t=${new Date().getTime()}`)
				this.isSelectId = 11
			}
		},
		methods:{
			clickMenuTitle(id){
				// 主标题点击事件
				this.menuListData.forEach((v)=>{
					if(v.id == id){
						v.isShow = !v.isShow
					}
				})
			},
			clickLiTitle(id, url){
				// 列表点击事件
				this.isSelectId = id
				this.$store.commit('set_myManagementNavIndex', id)
				this.$router.push(`${url}?t=${new Date().getTime()}`)
			}
		}
	}
</script>

<style scoped="scoped">
	.menuTitle{
		padding-left: 35px;
		width: 100%;
		position: relative;
		font-size: 16px;
		color: #333333;
		margin-bottom: 15px;
		cursor: pointer;
	}
	.menuUl{
		width: 100%;
		margin-bottom: 15px;
		height: auto;
	}
	.menuTitleImg{
		width: 16px;
		height: 16px;
		position: absolute;
		top: 0;
		bottom: 0;
		margin: auto;
		margin-left: -20px;
	}
	.menuLi{
		padding-left: 55px;
		width: 100%;
		font-size: 14px;
		color: #808080;
		line-height: 44px;
		cursor: pointer;
		position: relative;
	}
	.isSelectLi{
		background: #E5F4E9;
	}
	.isSelectLi::before{
		content: '';
		position: absolute;
		width: 4px;
		height: 100%;
		background: #23B14D;
		left: 0;
		top: 0;
		bottom: 0;
	}
	.el-icon{
		position: absolute;
		right: 15px;
		top: 2px;
		bottom: 0;
		margin: auto;
		color: #909090;
		transition: transform .2s;
		transform: rotate(0deg);
		transform-origin: center;
		width: 16px;
		height: 16px;
	}
	.isMenuShow{
		transform: rotate(90deg);
	}
</style>
